<template>
  <div>联系</div>
  <div>累计：{{ count }}</div>
  <div>{{ double }}</div>
  <n-button type="primary" @click="handleClick">naive-ui</n-button>
  <child :id="double" :message="message"></child>
</template>

<script>
import { defineComponent, computed, onMounted, ref, reactive } from 'vue'
import { useStore } from 'vuex'
import { NButton } from 'naive-ui'
import Child from "./Child.vue";
export default defineComponent({
  name: 'Contact',
  components: {
    NButton,
    Child
  },
  setup(props, context) {
    const { attrs, slots, emit } = context;
    const { commit, dispatch, getters } = useStore()
    const count = ref(0)
    const message = ref('vue composition api')
    const double = computed(() => count.value * 2)
    function increment() {
      return count.value ++
    }
    function handleClick() {
      commit('SET_NAME', '朱凯')
      increment()
    }
    return {
      count,
      double,
      message,
      handleClick
    }
  },
  updated() {
    console.log('外面的生命周期可以访问setup返回的属性', this.count)
  }
})
</script>

<style lang="less" scoped>

</style>
